<style scoped></style>

<template>
    <h1>{{ name }}</h1>
    <h2>{{ user.name }},{{ user.age }}</h2>
    <button @click="loadRef()">ref btn</button>
    <button @click="loadReactive()">reactive btn</button>
</template>

<script lang="ts" setup>

import { ref ,reactive} from 'vue';

const name = ref("jack");

// const user = reactive({name:"admin",age:20})
// ts
type User = {
    name:string,
    age?:number
}
const user = reactive<User>({name:"admin",age:20});

// ref : 操作数据的时候, 读|写 是通过操作这个对象的 value 属性
const loadRef = ()=>{
    console.log(name.value);
    name.value = "tom";
}

// reactive 直接操作
const loadReactive = ()=>{
    console.log(user.name,user.age);
    user.name = "scott";
    user.age = 30;
}


</script>